<!-- company表单弹窗 -->
<form id="title-form" lay-filter="title-form" class="layui-form model-form">
    <input name="titlid" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">称号名称</label>
        <div class="layui-input-block">
            <input name="ttname" placeholder="请输入称号名称" type="text" class="layui-input" maxlength="20"
                   lay-verify="required"
                   required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">称号颜色</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="titclr" value="" placeholder="请选择颜色" class="layui-input" id="titclr">
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="color-form"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">称号图片</label>
        <div class="layui-upload-drag" id="titleImg">
            <i class="layui-icon"></i>
            <p>点击上传，或将图片拖拽到此处</p>
            <div class="layui-hide" id="titleImgView">
                <hr>
                <img style="max-width: 196px" alt="上传成功后渲染" id="titleImgUrl" src="">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">称号类型</label>
        <div class="layui-input-block">
            <select name="tttype" id="tttype" lay-verify="required" lay-filter="type">
                <option value="-1"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="role" hidden="hidden">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <select name="roleid" id="roleid" lay-filter="role" lay-verify="required">
                <option value="-1"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">获取方式</label>
        <div class="layui-input-block">
            <select name="ruleId" id="ruleId" lay-verify="required" lay-filter="rule">

            </select>
        </div>
    </div>

    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
        <button class="layui-btn" lay-filter="title-form-submit" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'admin', 'form', 'config', 'upload', 'colorpicker'], function () {

        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var config = layui.config;
        var upload = layui.upload;
        var colorpicker = layui.colorpicker;

        colorpicker.render({
            elem: '#color-form',
            color: '#1c97f5',
            done: function (color) {
                $('#titclr').val(color);
            }
        });


        //拖拽上传
        upload.render({
            elem: '#titleImg',
            url: config.base_server + 'api-file/files-anon',
            accept: 'file', //改成您自己的上传接口
            auto: true,
            before: function(obj){
                layer.load(); //上传loading
                this.data={access_token:config.getToken().access_token};
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#titleImgView').removeClass('layui-hide').find('img').attr('src', result);
                    // $(".layui-upload-img").remove();
                    // $('#titleImgView').append('<img src="' + result + '" width="50px" height="50px" alt="' + file.name + '" class="layui-upload-img">')
                });
            },
            done: function (res) {
                layer.closeAll('loading');
                console.log(res)
                layer.msg('上传成功');
                layui.$('#titleImgView').removeClass('layui-hide').find('img').attr('src', res.url);
            },
            error: function (data) {
                console.log(data);
                layer.closeAll('loading');
            }
        });


        // 获取所有称号类型
        layer.load(2);
        admin.req('api-user/titleType/getSelectTitleTypes', {}, function (data) {
            layer.closeAll('loading');
            if (0 == data.code) {
                $.each(data.data, function (index, item) {
                    $('#tttype').append(new Option(item.tpname, item.tttpid)); //往下拉菜单里添加元素
                });
                form.render(); //菜单渲染 把内容加载进去
            } else {
                layer.msg('获取称号类型失败', {
                    icon: 2,
                    time: 500
                });
            }
        }, 'post');

        // 获取所有角色
        layer.load(2);
        admin.req('api-user/roles', {}, function (data) {
            layer.closeAll('loading');
            if (0 == data.code) {
                $.each(data.data, function (index, item) {
                    $('#roleid').append(new Option(item.name, item.id)); //往下拉菜单里添加元素
                });
                form.render(); //菜单渲染 把内容加载进去
            } else {
                layer.msg('获取称号类型失败', {
                    icon: 2,
                    time: 500
                });
            }
        }, 'get');

        // 选择角色专属后显示角色列表
        form.on('select(type)', function (data) {
            var type = $("select[name=tttype]").val();
            if (type === '1') {
                $("#role").show();
            } else {
                $("select[name=roleid]").val(-1); //往下拉菜单里添加元素
                form.render(); //菜单渲染 把内容加载进去
                $("#role").hide();
            }
            if (data.value !== '1') {
                getRuleByType(0, -1);
            }
        });

        // 回显title数据
        // debugger;
        var title = admin.getTempData('title');
        if (title) {
            if (title.tttype === 1) {
                $("#role").show();
            }
            getRuleByType(title.tttype, title.roleid);
            layui.$('#titleImgView').removeClass('layui-hide').find('img').attr('src', title.titleImgUrl);
            form.val('title-form', title);
            colorpicker.render({
                elem: '#color-form',
                color: title.titclr,
                done: function (color) {
                    $('#titclr').val(color);
                }
            });
        }

        // 表单提交事件
        form.on('submit(title-form-submit)', function (data) {
            console.log($("#titleImgUrl").attr("src"))
            // debugger;
            if (data.field.tttype === '-1' || data.field.tttype === '') {
                layer.msg("请选择称号类型", {
                    icon: 2,
                    time: 2000
                });
                return false;
            }
            if (data.field.ruleId === '' || data.field.ruleId === '-1') {
                layer.msg("请选择称号对应的获得方式", {
                    icon: 2,
                    time: 2000
                });
                return false;
            }
            if ($("#titleImgUrl").attr("src") === undefined || $("#titleImgUrl").attr("src") === '') {
                layer.msg("请上传称号的图片", {
                    icon: 2,
                    time: 2000
                });
                return false;
            }
            layer.load(2);
            data.field.titleImgUrl = $("#titleImgUrl").attr("src");
            if (data.field.titlid != null && data.field.titlid != '') {
                admin.req('api-user/title/updateTitle', JSON.stringify(data.field), function (data) {
                    layer.closeAll('loading');
                    if (data.code == 0) {
                        layer.msg(data.msg, {
                            icon: 1,
                            time: 2000
                        });
                        admin.finishPopupCenter();
                    } else {
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                }, 'POST');
                return false;
            } else {
                admin.req('api-user/title/addTitle', JSON.stringify(data.field), function (data) {
                    layer.closeAll('loading');
                    if (data.code == 0) {
                        layer.msg(data.msg, {
                            icon: 1,
                            time: 2000
                        });
                        admin.finishPopupCenter();
                    } else {
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                }, 'POST');
                return false;
            }

        });


        form.on('select(role)', function (data) {
            getRuleByType(0, -1);
        })


        function getRuleByType(typeId, roleId) {
            $('#ruleId').html("")
            if (typeId === 0) {
                var selectedId = $("#tttype option:selected").val();
            } else {
                var selectedId = typeId;
            }
            if (selectedId === -1) {
                layer.msg("请选择称号类型");
                return false;
            } else {
                if (selectedId === 1 && $("#roleid option:selected").val() === -1) {
                    layer.msg("请选择角色");
                    return false;
                }
                if (roleId === null) {
                    roleId = -1;
                } else if (roleId === -1) {
                    roleId = $("#roleid option:selected").val();
                }
                layer.load(2);
                admin.req('api-user/title/getRuleByTypeAndRoleId?typeId=' + selectedId + "&roleId=" + roleId, {}, function (data) {
                    layer.closeAll('loading');
                    if (data.code === 0) {
                        $.each(data.data, function (index, item) {
                            $('#ruleId').append(new Option(item.ttrule, item.ttruid)); //往下拉菜单里添加元素

                        });
                    } else {
                        layer.msg('获取称号的规则失败', {
                            icon: 2,
                            time: 500
                        });
                    }
                }, 'get');
            }
            form.render();
        }
    });
</script>
